<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="${imsPath}/asset/css/sweetalert.css"/>
    <script type="text/javascript" src="${imsPath}/asset/js/jquery.js"></script>
    <style>
        * { margin: 0px; padding: 0px; }

        body { overflow: hidden; }

        #bg_wrap { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; }

        #bg_wrap div { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; transition: opacity 3s }

        #bg_wrap div:nth-of-type(1) { opacity: 1 }

        /*第一个背景div*/
        #Login { width: 272px; height: 300px; margin: 200px auto; }

        #Login .move { position: absolute; top: -100px; }

        #Login h3 { font-size: 30px; font-weight: 700; color: #ffffff; font-family: Andalus; text-align: center; margin-bottom: 30px; cursor: move; }

        #Login input.txt { width: 270px; height: 42px; color: #ffffff; background: rgba(45, 45, 45, .15); border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; margin-bottom: 25px; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); text-indent: 10px; }

        #Login input.but { background: #ef4300; width: 272px; height: 44px; box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); border: 0px; border-radius: 6px; color: #ffffff; font-size: 14px; text-align: center; }

        #Login input:focus { outline: none; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); }

        /*当input获取焦点的时候*/

        input::-webkit-input-placeholder { color: #ffffff; }

        /*修改输入框默认输入文字颜色*/

        #title { width: 270px; text-align: center }
    </style>
    <!--<script type="text/javascript" src="${imsPath}/asset/js/jquery.min.js"></script>-->
    <script type="text/javascript" src="${imsPath}/asset/js/sweetalert.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	
   	 //html root的字体计算应该放在最前面，这样计算就不会有误差了/
       //2016.3.23 wjq update 之所以要加个判断返回一个20.5，是因为当用户在谷歌等浏览器直接输入手机端网站网址时，如果用户设置模块自定义样式的高度比较小，由于这时候的clientWidth为1920px，及返回的_htmlFontSize为40，这时候就会使模块太小，展示不完全，因此先取一个较为准确的值去展示。Mobi.resetHtmlFontSize()顺便也加了
       var _htmlFontSize = (function(){
           var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
           if(clientWidth > 768) clientWidth = 768;
           document.documentElement.style.fontSize = clientWidth * 1/16+"px";
           return clientWidth * 1/16;
       })();
   	 
     /*  var check = false;
		//点击检测是否有登录用户
           $.ajax({
               url: 'user/logined.do',
               dataType: 'json',
               type:'post',
               success: function(data) {
                   var username = data.username;
                   if (data.logined) {

                       document.location = '/guest#/blog'
                   }
               }
           });*/
       
       //登录信息检测
       $("#submit").click(function() {
           var username = $("#username").val();
           var password = $("#password").val();
           $.ajax({
               url: "user/benull.do",
               dataType: 'json',
               async: false,
               type:"post",
               data:{"username":username,"password":password},
               success: function(data) {
               	if (!data.flag) {
               	    /*swal("账号密码错误")*/
                 alert("账号密码错误")
               		/*swal("OMG", "登陆失败啦", "error");*/
                   } else {
                    /*alert("成功");
                    swal("OK!", "登陆成功", "sucess");
                   document.location = '/guest#/blog'*/
                   $("#myFormId").attr("action", "/guest#/blog");
                   }
               }
           });

       });
       
       

   });

    </script>
</head>
<body>
<div id="bg_wrap">
    <div><img src="${imsPath}/asset/images/1.jpg" width="100%" height="100%" alt="背景图"/></div>
    <div><img src="${imsPath}/asset/images/2.jpg" width="100%" height="100%" alt="背景图"/></div>
    <div><img src="${imsPath}/asset/images/3.jpg" width="100%" height="100%" alt="背景图"/></div>
</div>
<!--bg_wrap end-->
<!--Login start-->
<div id="Login">
    <h3 id="title" class="move">User Login</h3>
    <!--<form id="myFormId" name="form" method="post" action="/guest#/blog">-->
        <form id="myFormId" name="form">
        <input type="text" placeholder="Username" class="txt move" name="userName" id="username" required autocomplete="off">
        <input type="password" placeholder="Password" class="txt move" name="passWord" id="password" required>
        <input type="submit" class="but move" value="Sign in" id="submit"/>
    </form>
</div>
<script>
    /*
     1. 背景渐变 (定时器 + 透明度改变)

     改变定位元素的 top值 1
     达到指定位置之后进行弹跳一次 1

     多个元素依次运动

     动画序列
     /*	for(var i=len-1;i>=0;i--){
     (function(x){
     setTimeout(function(){
     clearInterval(timer);
     var end=150+(x*60);
     timer=setInterval(function(){
     speed+=3;
     var T=oMove[x].offsetTop+speed;
     if(T>end){
     T=end;
     speed*=-1; // 让动量变为负数
     speed*=0.4; // 摩擦系数 每一次都慢一点
     }
     console.log(speed)
     oMove[x].style.top=T+'px';
     },20);
     },900*(len-1-x))
     })(i)
     } */
    //oMove[len-1];


    //function(){}   /*匿名函数*/
    //()()           /*IIFE 匿名函数立刻执行 函数自执行体*/
    (function () {
        var timer = null;
        /*声明定时器*/
        /*最新的元素获取写法 兼容ie8*/
        /*一组元素*/
        var oImg = document.querySelectorAll('#bg_wrap div');
        var len = oImg.length; //3
        var index = 0;
        timer = setInterval(function () {
            oImg[index].style.opacity = 0;
            index++;//1 index=index+1;
            index %= len;  // 求模取余 index=index%len;
            /*
             0%3= 0 1%3=1	2%3=2 3%3=0整除了
             */
            oImg[index].style.opacity = 1;
        }, 3000);
    })();
    // 表单重力模拟弹跳系统
    (function () {

        var oMove = document.querySelectorAll('.move');
        var len = oMove.length;
        var timer = null;
        var timeout = null; //setTimeout
        var speed = 3;

        move(len - 1);
        function move(index) {
            //根据下标来计算end值
            if (index < 0) {//如果下标<0 我们清除所有定时器
                clearInterval(timer);     //清除循环定时器
                clearTimeout(timeout);	   //清除延时定时器
                return;                   //终止函数
            }
            var end = 150 + (index * 60);
            timer = setInterval(function () {
                //动量每回合自增3 模拟重力加速度
                speed += 3; // 4 7 11   -30 -27 -24 ... 30 -30
                //设置每一次的top值 他本身距离顶端的距离+ 动量
                var T = oMove[index].offsetTop + speed;

                //当元素的top大于设定值的时候
                if (T > end) {
                    T = end;
                    speed *= -1; // 让动量变为负数
                    speed *= 0.4; // 摩擦系数 每一次都慢一点;
                }
                console.log(speed)
                oMove[index].style.top = T + 'px';
            }, 20);
            //过多少时间之后执行函数
            timeout = setTimeout(function () {
                clearInterval(timer);
                index--;     // 3=>2
                move(index); // 递归自己调用自己
            }, 900);
        }


    })();
</script>
</body>
</html>
